<template>
    <div class="code-item">
        <p class="tips">邀请码</p>
        <p class="code">{{item.code}}</p>
        <p class="status">{{item.status}}</p>
        <cube-button class="copy-btn" :data-clipboard-text="item.code" @click="copy" :light="true">复制</cube-button>
    </div>
</template>

<script>
    import ClipboardJS from 'clipboard'

    export default {
        name: "code-item",
        props: {
            item: {
                type: Object
            }
        },
        mounted(){
            new ClipboardJS(".copy-btn")
        },
        methods: {
            copy() {
                this.$createToast({
                    txt: "复制成功",
                    type:'correct'
                }).show();
            }
        }
    }
</script>

<style scoped lang="less">
    .code-item {
        background: #fff;
        margin-bottom: 20px;
        .tips {
            font-size: 28px;
            text-align: center;
            color: #888888;
            line-height: 80px;
            height: 80px;
            border-bottom: dashed 1PX #e0e0e0;
        }
        .status {
            text-align: center;
            font-size: 14PX;
            color: #4b8d00;
            line-height: 80px;
            height: 80px;
        }
        .code {
            font-size: 12PX;
            color: #e64e4d;
            line-height: 80px;
            text-align: center;
            height: 80px;
        }
    }
</style>